<template>
    <div class="detail">
        <el-button @click="goBack" type="primary">返回</el-button>
        <h2 style="margin: 20px 0;">💰 收入明细表</h2>

        <el-table :data="list" stripe style="width: 100%">
            <el-table-column prop="order_id" label="订单号" width="150" />
            <el-table-column prop="user_name" label="用户" width="120" />
            <el-table-column prop="amount" label="金额" />
            <el-table-column prop="created_at" label="创建时间" width="200" />
        </el-table>
    </div>
</template>

<script setup>
    import { ref, onMounted } from 'vue'
    import api from '../api/index'
    import { useRouter } from 'vue-router'
    import { ElTable, ElButton } from 'element-plus'

    const list = ref([])
    const router = useRouter()

    const loadData = async () => {
        const res = await api.get('/revenue/details')
        list.value = res.data
    }

    const goBack = () => router.push('/')

    onMounted(loadData)
</script>

<style scoped>
    .detail {
        padding: 20px;
    }
</style>
